<template>
	<view class="wx-login">
		<image :src="imgUrl+'/pro/account-bg-top.png'" class="bg-top"></image>
		<!-- #ifdef MP-WEIXIN -->
		<view class="icon-back" @tap="back" :style="'top:'+nav_height+'px'">
			<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
		</view>
		<!-- #endif -->
		<view class="getuse_info">
			<image class="cart-image" src="/static/img/head.png" />
			<view>
				<view class="tips-text">
					你好，欢迎来到伊姿漾
				</view>
				<button open-type="getUserInfo" @tap='bindGetUserinfo' class='btn' :disabled="is_loading">
					<!-- <u-icon class="icon" name="weixin-fill" color="#fff" size="60"></u-icon> -->
					<view>快捷登录</view>
				</button>
			</view>
		</view>
		<image :src="imgUrl+'/pro/account-bg-bottom.png'" class="bg-bottom"></image>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				imgUrl: null,
				is_loading: false,
				nav_height: '',
				isBack: false,
				code: null,
				seconds: 60,
			}
		},
		onLoad(option) {
			this.imgUrl = this.$c.appImg
			console.log(option, 'option wxlogin')
			if (option.scene) {
				this.code = option.scene
			}
			//#ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: res => {
					console.log('状态栏高度', res.statusBarHeight);
					this.nav_height = res.statusBarHeight
				}
			})
			if (option.back == 1) {
				this.isBack = true
			}
			//#endif
		},
		methods: {
			...mapMutations(['login']),
			back() {
				uni.navigateBack()
			},
			bindGetUserinfo() {
				this.is_loading = true
				uni.showLoading({
					title: '登录中'
				})

				/*获取服务商*/
				let that = this;
				let params = {};
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								/*获取用户信息*/
								params.code = loginRes.code
							}
						});
					}
				})
				//小程序微信登录
				//#ifdef MP
				uni.getUserProfile({
					desc: '获取微信信息',
					success: function(infoRes) {
						console.log('信息', infoRes);
						params.iv = infoRes.iv
						params.encryptedData = infoRes.encryptedData
						params.oauth = 'miniapp'
						params.nickname = infoRes.userInfo.nickName
						params.head_pic = infoRes.userInfo.avatarUrl
						params.sex = infoRes.userInfo.gender
						that.$u.api.wXLogin(params).then(res => {
							console.log(res, 111111);
							// uni.requestSubscribeMessage({
							// 	tmplIds: ['EwQG6OcEyEB9P1uRihHQK027JQkYhQ11rFqd5fTvRCg',
							// 		'd_QwEBE5Q4JZlpQV76RyAJpC__oh5I_XL2iEr9JCLkI'
							// 	],
							// 	complete: (obj) => {
									// console.log('1---',obj);
									uni.hideLoading()
									that.is_loading = false

									if (res.status) {
										uni.setStorageSync('token', res.msg.token);
										uni.setStorageSync('hasLogin', true);
										uni.setStorageSync('userInfo', res.msg.userinfo);
										that.login();
										console.log('状态--', that.isBack);
										if (that.isBack) {
											uni.navigateBack({
												delta: 2
											})
										} else {
											uni.switchTab({
												url: "/pages/home/home"
											});
										}
									} else if (res.code == -10) {
										// #ifdef APP-PLUS
										uni.navigateTo({
											url: './bind_tel?item=' +
												encodeURIComponent(JSON.stringify(
													params))
										})
										// #endif
										// #ifdef MP-WEIXIN

										uni.navigateTo({
											url: './bind_tel?item=' +
												encodeURIComponent(JSON.stringify(
													res.msg.unionid))
										})

										// #endif
									} else {
										uni.showToast({
											icon: 'none',
											title: res.msg
										})
									}
							// 	},
							// })

						})

					},
					fail: err => {
						uni.hideLoading()
						that.is_loading = false
					}

				});

				//#endif

			}
		}
	}
</script>

<style>
	.icon-back {
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		left: 20rpx;
		z-index: 2;
		text-align: center;
		line-height: 75rpx;
		padding-right: 5rpx;
		/* margin-top:20rpx; */
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		padding-top: 15rpx;
		padding-left: 10rpx;
	}

	.wx-login {
		position: relative;
		z-index: 1;
		min-height: 100vh;

	}

	.tips-text {
		font-size: 30rpx;
	}

	.bg-top {
		position: absolute;
		top: 0;
		right: 0;
		width: 396rpx;
		height: 432rpx;
		z-index: -1;
	}

	.bg-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 304rpx;
		height: 370rpx;
		z-index: -1;
	}

	page {
		background-color: #fff;
		text-align: center;
	}

	.cart-image {
		width: 180rpx;
		height: 180rpx;
		display: block;
		margin: 0 auto 100rpx;
		border-radius: 50%;
		/* box-shadow: 0px 2px 30px 2px rgba(138, 213, 191, 0.51); */

	}

	.getuse_info {
		position: fixed;
		top: 50%;
		left: 50%;
		right: 0;
		width: 750rpx;
		transform: translate(-50%, -50%);
	}

	.btn {
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-image: linear-gradient(to right, #e9d2fa, #be8ff0);
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}

	.icon {
		margin-right: 20rpx;
	}
</style>